---
import AccountDropdown from './AccountDropdown.astro';
---

<div>
  <AccountDropdown />

  <a
    id='register-button'
    class='flex h-8 w-28 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
    href='/signup'
  >
    <span>Register</span>
  </a>
</div>

<script>
  import Cookies from 'js-cookie';
  import { TOKEN_COOKIE_NAME } from '../../lib/constants';
  const registerButton = document.getElementById('register-button');
  const accountDropdown = document.getElementById('account-dropdown');

  const token = Cookies.get(TOKEN_COOKIE_NAME);

  if (token) {
    accountDropdown?.classList.remove('hidden');
    registerButton?.classList.add('hidden');
  } else {
    registerButton?.classList.remove('hidden');
    accountDropdown?.classList.add('hidden');
  }
</script>
